<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
	<head>
		<div th:replace="commons/html-header"></div>
	</head>
	<body class="skin-1">

	<div th:replace="commons/head"></div>



	<div class="main-container" id="main-container">

		<script type="text/javascript">

			try{gds.settings.check('main-container' , 'fixed')}catch(e){}

		</script>

		<div class="main-container-inner">

			<a class="menu-toggler" id="menu-toggler" href="#">

				<span class="menu-text"></span>

			</a>



			<div th:replace="admin/admin-menu"></div>

			<div class="main-content">

				<div class="breadcrumbs" id="breadcrumbs">

					<script type="text/javascript">

						try{gds.settings.check('breadcrumbs' , 'fixed')}catch(e){}

					</script>



					<ul class="breadcrumb">
						<li>
							<i class="icon-home home-icon"></i>
							<a href="#">Home</a>
						</li>
						<li class="active">
							<a href="/roles">接口角色管理</a>
						</li>
					</ul><!-- .breadcrumb -->

				</div>
				<div class="page-content">

					<div class="page-header">
						<form class="form-inline" role="form">
							<div class="form-group">
								<label class="sr-only" for="c_ROLE_NAME">角色名称</label>
								<input type="text" class="form-control" id="c_ROLE_NAME" placeholder="请输入角色名称" />
							</div>
							<button type="button" id="btn-search" class="btn btn-sm btn-info"><i class="icon-search"></i>查询</button>
							<button type="button" id="btn-add" class="btn btn-sm btn-primary pull-right"><i class="icon-plus"></i>新增角色</button>
						</form>

					</div>

					<div class="row">

						<div class="col-xs-12">
							<div class="table-responsive">

								<table id="tbl" class="table table-striped table-bordered table-hover">
									<thead>
									<tr>

										<th class="center col-sm-1">序号</th>
										<th class="col-sm-2">角色名称</th>
										<th>描述</th>
										<th></th>
									</tr>
									</thead>
									<tbody>

									</tbody>
								</table>
							</div><!-- /.table-responsive -->
						</div><!-- /.col -->

					</div><!-- /.row -->

				</div><!-- /.page-content -->

			</div><!-- /.main-content -->

		</div><!-- /.main-container-inner -->

		<div class="modal fade" id="edit_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
						</h4>
					</div>
					<div class="modal-body">
						<form name="edit_form" action="/roles/save" method="post" class="form-horizontal">
							<input class="form-control" name="c_ROLE_ID" autocomplete="off" type="hidden" id="md_C_ROLE_ID" />
							<div class="form-group">
								<label class="col-sm-3 control-label" for="md_C_ROLE_NAME">角色名称</label>
								<div class="col-sm-9">
									<input class="form-control" name="c_ROLE_NAME" type="text" id="md_C_ROLE_NAME" placeholder="请输入角色名称" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label" for="md_C_ROLE_REMARK">角色描述</label>
								<div class="col-sm-9">
									<textarea style="resize: none;" rows="6" class="form-control" type="text" name="c_ROLE_REMARK" id="md_C_ROLE_REMARK" placeholder="请输入角色描述"/>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消
						</button>
						<button type="button" id="btn-save" class="btn btn-sm btn-primary">
							保存
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

		<div class="modal fade" id="role_modal" tabindex="-1" role="dialog" aria-labelledby="roleTitleLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="roleTitleLabel">角色权限设置</h4>
					</div>
					<div class="modal-body">
						<form name="role_form" class="form-horizontal">
							<input class="form-control" name="c_ROLE_ID" autocomplete="off" type="hidden" />
							<div class="form-group">
								<label class="col-md-2 control-label pull-left" for="groleName">角色名称</label>
								<div class="col-md-10">
									<input class="form-control" readonly = "readonly" name="c_ROLE_NAME" id="groleName" type="text"/>
								</div>
							</div>
							<div class="form-group">
								<div class="col-md-6">
									<table class="table">
										<caption>接口</caption>
										<thead>
											<tr>
												<td></td>
												<td colspan="2">接口名称</td>
												<td colspan="2">URL</td>
												<td colspan="2">允许访问</td>
											</tr>
										</thead>
										<tbody id="roleInterfBody">
											<tr	 th:each="interf,stat:${interfList}">
												<td th:text="${stat.index + 1}"></td>
												<td colspan="2"><div th:title="${interf.c_INTERF_NAME}" th:text="${interf.c_INTERF_NAME}"></div></td>
												<td colspan="2"><div th:title="${interf.c_INTERF_METHOD_NAME}" th:text="${interf.c_INTERF_METHOD_NAME}"></div></td>
												<td><input type="checkbox" th:value="${interf.c_INTERF_ID}" name="c_INTERF_ID" /></td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="col-md-6">
									<table class="table">
										<caption>安全项</caption>
										<thead>
										<tr>
											<td></td>
											<td colspan="3">安全项名称</td>
											<td>启用保护</td>
										</tr>
										</thead>
										<tbody id="roleDsiBody">
											<tr th:each="dsi,stau : ${dsiList}">
												<td th:text="${stau.index + 1}"></td>
												<td colspan="3"><div th:title="${dsi.c_DS_ITEM_NAME}" th:text="${dsi.c_DS_ITEM_NAME}"></div></td>
												<td><input type="checkbox" name="c_DS_ITEM_ID" th:value="${dsi.c_DS_ITEM_ID}"/></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消
						</button>
						<button type="button" id="btn-save-roles" class="btn btn-sm btn-primary">
							保存
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>


		<div class="modal fade" id="preview_modal" tabindex="-1" role="dialog" aria-labelledby="previewLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="previewLabel">
							接口角色授权预览 &gt;&gt; <span id="roleName"></span>
						</h4>
					</div>
					<div class="modal-body" style="min-height: 350px;max-height: 800px;">
						<div class="col-md-12">
							<div class="col-md-4">
								<h4>接口列表</h4>
								<table class="table table-striped">
									<thead>
									<tr>
										<th class="col-sm-3">序号</th>
										<th>接口名称</th>
									</tr>
									</thead>
									<tbody>

									</tbody>
								</table>
							</div>
							<div class="col-md-8">
								<h5>接口返回信息</h5>
								<table class="table table-striped">
									<thead>
									<tr>
										<th></th>
										<th>接口参数</th>
										<th>参数名称</th>
										<th>替换规则</th>
									</tr>
									</thead>
									<tbody>

									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
						<button type="button" id="btn-save-cfg" class="btn btn-sm btn-primary">保存</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="icon-double-angle-up icon-only bigger-110"></i>
		</a>

	</div><!-- /.main-container -->



	<!-- basic scripts -->
	<div th:replace="commons/html-js"></div>

	<!-- inline scripts related to this page -->

	<script>
		var c_ROLE_NAME;
		var dataList;
		var lastTD =
			'<td>' +
				'<div class="visible-md visible-lg hidden-sm hidden-xs btn-group"> ' +
					'<button type="button" class="btn btn-xs btn-success" onclick="grantForRole(\'{{0}}\',\'{{1}}\')" > ' +
						'<i class="icon-flag bigger-120"></i>授权 ' +
					'</button>' +
					'<button type="button" class="btn btn-xs btn-info" onclick="updateRole(\'{{0}}\')" >' +
						'<i class="icon-edit bigger-120"></i>修改 ' +
					'</button> ' +
					'<button type="button" class="btn btn-xs btn-danger" onclick="delRole(\'{{0}}\')" > ' +
						'<i class="icon-trash bigger-120"></i>删除 ' +
					'</button> ' +
					'<button type="button" class="btn btn-xs btn-primary" onclick="prevRole(\'{{0}}\')" > ' +
					'<i class="icon-eye-open bigger-120"></i>预览 ' +
					'</button> ' +
				'</div> ' +
			'</td>';
		queryForList = function() {
		    $.post(contextPath + "/roles/list" , {c_ROLE_NAME : c_ROLE_NAME} , function (data) {
		        var html = '';
		        //<![CDATA[
				if (null != data && data.length > 0) {
                    dataList = data;
				   for (var i = 0; i<data.length; i ++) {
                       html += '<tr>';
				       html += ('<td class="center">' + (i+1) + '</td><td><div title="' + data[i].c_ROLE_NAME + '">' + data[i].c_ROLE_NAME + '</div></td><td><div title="' + (null == data[i].c_ROLE_REMARK ? '' : data[i].c_ROLE_REMARK) + '">' + (null == data[i].c_ROLE_REMARK ? '' : data[i].c_ROLE_REMARK) + '</div></td>');
				       html += lastTD.replace(/\{\{0\}\}/gi,data[i].c_ROLE_ID).replace(/\{\{1\}\}/gi,data[i].c_ROLE_NAME);
                       html += '</tr>';
				   }

				}
				// ]]>
				$("#tbl tbody").html(html);
            })
		}
		initEditModal = function (title,id,name,remark) {
            $("#md_C_ROLE_ID").val(id);
            $("#md_C_ROLE_NAME").val(name);
            $("#md_C_ROLE_REMARK").val(remark);
            $("#myModalLabel").text(title);
            $("#edit_modal").modal();
        }
        updateRole = function (c_ROLE_ID) {
			var roleName;
			var roleRemark;
			// <![CDATA[
			if (null != dataList && dataList.length > 0)
			$(dataList).each(function(index, obj) {
			    if (obj.c_ROLE_ID == c_ROLE_ID) {
                    roleName = obj.c_ROLE_NAME;
                    roleRemark = obj.c_ROLE_REMARK;
				}
			});
			if (null != roleName ) {
			    this.initEditModal("修改接口角色",c_ROLE_ID,roleName, roleRemark);
			}
			// ]]>
        }
        delRole = function (c_ROLE_ID) {
//		    <![CDATA[
			bootbox.confirm({
                buttons: {
                    confirm: {
                        label: '确定',
                        className: 'btn-sm btn-primary'
                    },
                    cancel: {
                        label: '取消',
                        className: 'btn-sm btn-default'
                    }
                },
                title : "<i class='icon-question-sign'></i> 确认",
			    message :'确定删除接口角色？',
                size: 'small',
				callback : function (result) {
                    if (result) {
                        $.post(contextPath + "/roles/" + c_ROLE_ID + "/delete", function (data) {
                            var ok = false;
                            if (null != data) {
                                if (0 == data.code) {
                                    queryForList();
                                    ok = true;
                                }
                            }
                            if (!ok) {
                                bootbox.dialog({
                                    message: '<span class="bigger-110">删除失败</span>',
                                    buttons: {
                                        "danger": {
                                            "label": "确定",
                                            "className": "btn-sm btn-danger"
                                        }
                                    }
                                });
                            }
                        });
                    }
                }
			})
//            ]]>
        };
        var dsiArr = new Array();
        grantForRole = function (c_ROLE_ID,c_ROLE_NAME) {
            dsiArr = new Array();
		    $("#role_modal form[name=role_form]").find('input[name=c_ROLE_ID]').val(c_ROLE_ID);
		    $("#role_modal form[name=role_form]").find('input[name=c_ROLE_NAME]').val(c_ROLE_NAME);
			$("#role_modal").modal();
            $("#roleInterfBody input:checkbox").removeAttr("checked");
            $("#roleDsiBody input:checkbox[name=c_DS_ITEM_ID]").removeAttr("checked");
			$.post(contextPath + "/roles/interfDsi" , {c_ROLE_ID},function (data) {
				//<![CDATA[
				if (null != data) {
				    if(null != data.interfs && data.interfs.length > 0) {
				        $(data.interfs).each(function (index,obj) {
							$("#roleInterfBody input:checkbox[name=c_INTERF_ID][value="+ obj +"]").prop("checked","checked");
                        });
					}
                    if(null != data.dsiLists && data.dsiLists.length > 0) {
                        $(data.dsiLists).each(function (index,obj) {
                            $("#roleDsiBody input:checkbox[name=c_DS_ITEM_ID][value="+ obj +"]").prop("checked","checked");
                        });
                    }
				}
				//]]>
            } )

        };
        prevRole = function (c_ROLE_ID) {
            //<![CDATA[
			/*$.post(contextPath + "/roles/getRoleInterfs" , {c_ROLE_ID} , function (data) {
				if (null != data && null != data.interfList && data.interfList.length > 0) {
				    var html = '';
				    for (var i = 0; i< data.interfList.length; i++) {

					}
				    $("#sel_interf").html();
				}
            })*/
			//]]>
        };
		$(document).ready(function () {
		    queryForList(null);
			$("#btn-search").on("click" , function () {
                c_ROLE_NAME = $("#c_ROLE_NAME").val();
				queryForList();
            });
			
			$("#btn-add").on('click' , function () {
                initEditModal("新增接口角色",'','','');
            });

            $("#btn-save").on("click",function () {
                $.post(contextPath + '/roles/save',$("form[name=edit_form]").serializeArray(), function (data) {
                        //<![CDATA[
                        if (null != data) {
                            if (0 == data.code) {
                                $("#edit_modal").modal('hide');
                                queryForList()
                            } else if ( 500 == data.code) {
                                bootbox.dialog({
                                    message: '<span class="bigger-110">' + data.msg + '</span>',
                                    buttons:
                                        {
                                            "danger" :
                                                {
                                                    "label" : "确定",
                                                    "className" : "btn-sm btn-danger"
                                                }
                                        }
                                });
							}
                        }
                        return false;
                        // ]]>
                    });
                return false;
            });

            $("#btn-save-roles").on("click" , function () {

				var interfArr = $("#roleInterfBody input:checkbox:checked").map(function () {
					return $(this).val();
                }).get();
                var dsiArr = $("#roleDsiBody input:checkbox:checked").map(function () {
                    return $(this).val();
                }).get();
                if (null == interfArr || interfArr.length == 0) {
                    bootbox.alert({
                        buttons:{
                            ok:{
                                label:'确定',
								className: 'btn btn-sm btn-primary'
							}
						},
						message : '未选择允许访问的接口！'
					});
                    return false;
				}

                if (null == dsiArr || dsiArr.length == 0) {
                    bootbox.confirm( {
                        buttons: {
                            cancel:{
                                label:'取消',
								className : 'btn btn-sm btn-default'
							},
							confirm: {
                                label:'确定',
								className: 'btn btn-sm btn-primary'
							}
						},
						title : '确认',
						message: '未选择需要保护的安全项，该角色将可以访问接口中的所有内容！',
                        callback: function (result) {
							if (result) {
                                saveRoleDsiInterfs($("#role_modal form[name=role_form] input[name=c_ROLE_ID]").val(),interfArr,dsiArr);
							}
                        }
					});
                } else {
                    saveRoleDsiInterfs($("#role_modal form[name=role_form] input[name=c_ROLE_ID]").val(),interfArr,dsiArr);
				}
            });
           /* $("#btn-save-roles").on("click" , function () {
                var arr = new Array;
                // <![CDATA[
                if (null != dsiArr) {
                    for (var p in dsiArr) {
                        if (null != dsiArr[p] && dsiArr[p].length > 0) {
                            for( var k = 0; k< dsiArr[p].length; k ++) {
                                //if (dsiArr[p][k].ifProt == 1) {
                                    arr[arr.length] = dsiArr[p][k];
                                //}
                            }
                        }
                    }
                }
                if (null != arr && arr.length > 0) {

                    $.ajax({
                        type: "post",
                        url: contextPath + '/roles/saveDsiInterfs',
                        data:JSON.stringify({c_ROLE_ID:$("#role_modal form[name=role_form] input[name=c_ROLE_ID]").val(),roleDsiInterfs:arr}),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            if (null != data) {
                                bootbox.alert({
                                    buttons: {
                                        ok: {
                                            label: '确定',
                                            className: 'btn-sm btn-primary'
                                        }
                                    },
                                    title :"提示",
                                    message :data.msg,
                                    size: 'small',
                                    callback : function () {
                                        if (data.code == '0'){
                                            $("#role_modal").modal('hide');
                                            queryForList();
                                        }
                                    }
                                });
                            }
                            return false;
                        }, error: function () {
                            bootbox.dialog({
                                message: '<span class="bigger-110">配置元数据项出错！</span>',
                                buttons:
                                    {
                                        "danger" :
                                            {
                                                "label" : "确定",
                                                "className" : "btn-sm btn-danger"
                                            }
                                    }
                            });
                        }
                    })
                }
                // ]]>
            });

*/
        });
        function saveRoleDsiInterfs(c_ROLE_ID, interfsArr, dsiArr) {
            $.ajax({
                type: "post",
                url: contextPath + '/roles/grant',
                data:JSON.stringify({c_ROLE_ID:c_ROLE_ID,interfList:interfsArr, dsiList:dsiArr}),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (null != data) {
                        bootbox.alert({
                            buttons: {
                                ok: {
                                    label: '确定',
                                    className: 'btn-sm btn-primary'
                                }
                            },
                            title :"提示",
                            message :data.msg,
                            size: 'small',
                            callback : function () {
                                if (data.code == '0'){
                                    $("#role_modal").modal('hide');
                                    queryForList();
                                }
                            }
                        });
                    }
                    return false;
                }, error: function () {
                    bootbox.dialog({
                        message: '<span class="bigger-110">角色授权出错！</span>',
                        buttons:
                            {
                                "danger" :
                                    {
                                        "label" : "确定",
                                        "className" : "btn-sm btn-danger"
                                    }
                            }
                    });
                }
            });
        }
	</script>
</body>

</html>

